import React, { Component } from "react";
// 只有类组件可以定义自己的state，函数组件是不可以的

class App extends Component {
  // 只有state定义的数据才具有响应式
  // 1. 申明式地定义state
  // state = {
  //   msg: "hello react!",
  //   count: 1,
  // };

  // 2. 使用构造函数的构造器来定义state
  // constructor是一个特殊的函数，当这个类被实例化的时候就会自动执行，最先执行
  // constructor其实还是类组件的第一个生命周期
  constructor() {
    // 调用super方法，就是在调用父类的constructor
    super();
    this.state = {
      msg: "hello react!",
      count: 1,
      show: true,
      list: ["🍎", "🍌", "🍓"],
    };
  }

  render() {
    const { msg, count, show, list } = this.state;
    return (
      <>
        <h3>定义state</h3>
        <p>{msg}</p>
        <p>总数： {count}</p>
        {/* 条件渲染 */}
        {/* {show ? <p>你看到我了</p> : null} */}
        {show && <p>你看到我了</p>}

        {/* 循环渲染 */}
        <ul>
          {list.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      </>
    );
  }
}

export default App;
